<template>
  <div v-loading="loading" element-loading-text="加载中，请稍候">
    <table class="common-table" cellspacing="0" width="100%">
      <tr>
        <td class="required" width="10%">名称</td>
        <td colspan="3">
          <el-input v-model.trim="form.name" name="name" v-validate="{ required: checkRequired, length: 16, lettersAndNumbers: true }"></el-input>
          <span v-if="errors.has('name')" class="danger-tips">{{ errors.collect('name')[0] }}</span>
        </td>
      </tr>
      <tr>
        <td class="required" width="10%">添加附件</td>
        <td colspan="3">
          <el-upload action="/upload" :on-change="uploadFile" name="fileList" v-validate="{ required: checkRequired }" v-model="form.fileList" :before-remove="removeFile" accept=".jpg,.jpeg,.png*,.pdf" :show-file-list="true" :file-list="form.fileList" list-type="picture" :auto-upload="false">
            <el-button>添加附件</el-button>
          </el-upload>
          <span v-if="errors.has('fileList')" class="danger-tips">{{ errors.collect('fileList')[0] }}</span>
        </td>
      </tr>
      <tr>
        <td class="required" width="15%">分类</td>
        <td>
          <el-select v-model="form.type" v-validate="{ required: checkRequired }" name="type">
            <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"></el-option>
          </el-select>
          <span v-if="errors.has('type')" class="danger-tips">{{ errors.collect('type')[0] }}</span>
        </td>
      </tr>
      <tr>
        <td class="required" width="10%">年份</td>
        <td>
          <el-date-picker v-model="form.year" v-validate="{ required: checkRequired }" type="date" name="year" value-format="timestamp"></el-date-picker>
          <span v-if="errors.has('year')" class="danger-tips">{{ errors.collect('year')[0] }}</span>
        </td>
      </tr>
      <tr>
        <td class="required" width="10%">选项</td>
        <td>
          <el-checkbox v-model="form.checkbox" name="checkbox" v-validate="{ required: checkRequired }">备选项</el-checkbox>
          <span v-if="errors.has('checkbox')" class="danger-tips">{{ errors.collect('checkbox')[0] }}</span>
        </td>
      </tr>
    </table>

    <div class="footer">
      <el-button class="save-btn" type="primary" @click.stop="save">保存</el-button>
      <el-button class="close-btn" @click.stop="closeDialog">关闭</el-button>
    </div>
  </div>
</template>

<script>
import API from "@/api";

export default {
  components: {},
  data() {
    return {
      loading: false,
      checkRequired: true,
      form: {
        name: "",
        fileList: [],
        year: "",
        type: "",
        checkbox: ""
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  computed: {},
  // 方法集合
  methods: {
    // 保存
    save() {
      this.$validator.validateAll().then(res => {
        if (!res) {
          this.$message({
            type: "error",
            message: "表单输入有误，请重新填写！！！"
          });
          return;
        }
        // this.loading = true
      });
    },
    // 附件上传
    uploadFile(file, fileList) {
      const fitFormat =
        file.raw.type === "image/png" ||
        file.raw.type === "image/jpeg" ||
        file.raw.type === "application/pdf";
      const isLt2M = file.size / 1024 / 1024 < 50;
      if (!fitFormat) {
        fileList.splice(-1, 1);
        this.$message.error("附件只能为JPG/PNG/PDF格式！");
        return;
      }
      if (!isLt2M) {
        fileList.splice(-1, 1);
        this.$message.error("附件大小不能超过50MB！");
        return;
      }
      this.form.fileList = [fileList[fileList.length - 1]];
      this.form.fileList = { url: file.url, file: file, name: file.name };
    },
    // 移除附件
    removeFile(file, fileList) {
      this.form.fileList = [];
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  .save-btn {
    margin-right: 30px;
  }
  .close-btn {
    margin-left: 30px;
  }
}
</style>
